<template>
  <div class="dashboard-editor-container">
    <div class="filter-container" style="margin-bottom: 20px;">
      <el-select v-model="oldsterId" placeholder="选择老人姓名" clearable style="width: 200px;" class="filter-item">
        <el-option v-for="item in oldsterList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="time" placeholder="填入日期" clearable style="margin-left: 10px;width: 200px;" class="filter-item"/>
      <el-button style="margin-left: 10px" type="primary" @click="searchTrace" >查询轨迹</el-button>
    </div>
        <div class="chart-wrapper" >
          <canvas id="canvas" >
          </canvas>
          <img v-show="show" id="myImg" src="../../../public/img.png" width="600px" height="300px"/>
        </div>
    <el-table
        :data="trace.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        fit
        highlight-current-row
        style="width: 70%;padding-top: 15px;"
    >
      <el-table-column label="ID" width="100" align="center">
        <template slot-scope="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="摄像区域" width="250" align="center">
        <template slot-scope="{row}">
          {{ row.areaName }}
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center">
        <template slot-scope="{row}">
          {{ row.time }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        align="center"
        :current-page="currentPage"
        :page-sizes="[1,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="trace.length"
        style="width: 90% ;margin-top:20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {getOldInfo} from "@/api/infoApi";
import {getOldTrace} from "@/api/recordApi";

export default {
  name: "TraceView",
  components: {

  },
  data() {
    return {
      trace:[],
      canvas:null,
      ctx:null,
      img:null,
      coordinate:[[170,150],[430,130],[570,350],[170,350]],
      show:false,
      oldsterList:[],
      time: '',
      oldsterId:null,
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 5 // 每页的数据条数
    }
  },
  methods: {
    searchTrace(){
      let context = this.ctx
      context.clearRect(0,0,this.canvas.width,this.canvas.height)
      const img = new Image()
      img.src= 'img.png'
      img.onload = function(){
        img.width = 800
        img.height = 500
        context.fill()
        context.drawImage(img,0,0,800,500)
      }
      getOldTrace(this.oldsterId,this.time).then(res => {
        this.trace = res.result;
        if(this.trace.length>1){
          for(let i = 1; i < this.trace.length; i++){
            let x1 = this.trace[i-1].a
            let y1 = this.trace[i-1].b
            let x2 = this.trace[i].a
            let y2 = this.trace[i].b
            this.drawTrace(this.ctx, x1,x2,y1,y2)
          }
        }
      }).catch(err => {
        console.log(err);
      })
      // setTimeout(() => {
      //
      // }, 1000)

    },
    drawTrace(ctx, x1, x2, y1, y2){
      ctx.beginPath();
      ctx.strokeStyle = "blue";
      //定义直线的起点坐标为(10,10)
      ctx.moveTo(x1, y1);
      //定义直线的终点坐标为(50,10)
      ctx.lineTo(x2, y2);
      //沿着坐标点顺序的路径绘制直线
      ctx.stroke();
      ctx.closePath();
      let endRadians = Math.atan((y2 - y1) / (x2 - x1));
      endRadians+=((x2>x1)?90:-90)*Math.PI/180;
      this.drawArrowhead(ctx,x2,y2,endRadians);
    },
    drawArrowhead(ctx,x,y,radians){
      ctx.save();
      ctx.beginPath();
      ctx.translate(x,y);
      ctx.rotate(radians);
      ctx.moveTo(0,0);
      ctx.lineTo(5,20);
      ctx.lineTo(-5,20);
      ctx.closePath();
      ctx.restore();
      ctx.fill();
      ctx.closePath();
    },
    getOrders(){
      getOldInfo().then(res => {
        this.oldsterList = res.result;
      }).catch(err => {
        console.log(err);
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }

  },
  mounted() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = 800
    canvas.height = 500
    const img = new Image()
    img.src= 'img.png'
    img.onload = function(){
      img.width = 800
      img.height = 500
      ctx.fill()
      ctx.drawImage(img,0,0,800,500)
    }
    this.canvas = canvas
    this.ctx = ctx
    this.getOrders()

  }
}
</script>

<style scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(247, 247, 247);
  position: relative;
}
.chart-wrapper {
    width: 800px;
    height: 520px;
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
.blue-button {
  background-color: #E4F2F5;
  /* 其他样式属性 */
}
</style>

